<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>蘑菇街</title>
    <meta name="Keywords" content="蘑菇,潮流"/>
    <meta name="Description" content="蘑菇网引领潮流"/>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
          name="viewport">
    <!-- Mobile Devices Support @begin -->
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
    <meta content="no-cache" http-equiv="pragma">
    <meta content="0" http-equiv="expires">
    <meta content="telephone=no, address=no" name="format-detection">
    <!-- Mobile Devices Support @end -->
    <link href="../css/index.css" rel="stylesheet"/>
    <link href="../css/common.css" rel="stylesheet"/>
    <script src="../script/jquery-1.9.1.min.js"></script>
    <script src="../script/main.js"></script>
    <script src="../script/jquery.rotate.min.js"></script>
    <script src="../script/api.js"></script>
    <script src="../script/settings.js"></script>
    <script src="../script/vue.js"></script>
    <script src="../script/axios.js"></script>
    <style>
        .is_show_more {
            height: auto;
            overflow: hidden;
            display: block;
        }

        .isnot_need {
            display: none;
        }
    </style>
</head>

<body>
<div class="main" id="app">
    <!--头部-->
    <div class="header" id="bktop">
        <div class="logo"><a href=""><img :src="siteconfig.logo"/></a></div>
        <div class="banner">
            <div class="close"><img id="img1" src="../image/banner01.gif"/></div>
            <div class="open hide"><img id="img2" src="../image/banner02.gif"/></div>
            <ul class="xla">
                <li v-for="top in nav_list">
                    <a class="dianj dj1" href="javascript:;"><font>{{top.name}}</font><img id="ig1"
                                                                                           src="../image/xiala.gif"/></a>
                    <div class="zilan">
                        <a v-for="son in top.children_list">{{son.name}}</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="clearBoth"></div>
    </div>  <!--关于我们内容-->
    <div class="newsban"><a style="color:#ccc" href="">首页</a> > <a style="color:#ccc" href="">蘑菇潮流</a> > {{news.title}}
    </div>
    <div class="newbt">{{news.title}}</div>
    <div class="about">
        <div class="content2">
            <table class="what">
                <tr class="time">
                    <td class="tub"><img src="../image/time.gif"/></td>
                    <td class="shij">{{news.create_time}}</td>
                    <td class="clearBoth"></td>
                </tr>
                <tr class="time hit">
                    <td class="tub"><img src="../image/hit.gif"/></td>
                    <td class="shij">{{news.read_count}}</td>
                    <td class="clearBoth"></td>
                </tr>
                <td class="clearBoth"></td>
            </table>
            <!--编辑内容-->
            <h class='is_show_more'>
                <p style="color:#cccccc;font-size:16px;line-height:30px;">&nbsp;&nbsp;&nbsp;&nbsp;街拍里，时尚达人们露出纤细漂亮的大腿，仿佛和深秋生活在不同的次元范围。平凡又普通的姑娘们有心借鉴她们的搭配方法，却在日常里发现美丽的代价实在有点大。不过亲爱的，你有没有发现，达人们的呢大衣更值得学习。</p></br>
                <p style="text-align:center;"><img src="../image/product/14110702.jpg"/></p></br>
                <p style="color:#cccccc;font-size:16px;line-height:30px;">&nbsp;&nbsp;&nbsp;&nbsp;01
                    最经典莫过于英伦式双排扣的毛呢外套，如果是藏蓝色那就更好。呢大衣自身的版型就足以补救尚未减肥的悲伤，毛衫+打底裤+长短靴的自由组合在衣橱里扒拉一下谁都能穿上。呈现对比色的围脖作为点睛之笔，将秋天点亮。</p></br>
                <p style="text-align:center;"><img src="../image/product/14110703.jpg"/></p></br>
                <p style="color:#cccccc;font-size:16px;line-height:30px;">&nbsp;&nbsp;&nbsp;&nbsp; 02
                    不纠结呢大衣该怎么装饰才好，不喜欢围脖或是围巾作为造型助力选择一件防风小立领的呢大衣就能把问题通通解决掉。大而圆润的斜襟扣兼顾了美观和实用性，什么叫做拿一份薪水做两份工作，看它就知道。</p></br>
                <p style="text-align:center;"><img src="../image/product/14110704.jpg"/></p></br>
                <p style="color:#cccccc;font-size:16px;line-height:30px;">&nbsp;&nbsp;&nbsp;&nbsp; 03
                    对于秋天真的没多少要求，宽松又漂亮就行。随手抽出一件果绿的呢外套，不得不说，这样吸睛又亮眼的色彩，恰恰勾起了去尝试一番的好奇心。都说偏荧光的色彩穿得好与不好是两种视觉类型，不过用简单的白色中和它的跳脱，比不错还不错。</p></br>
                <p style="text-align:center;"><img src="../image/product/14110705.jpg"/></p></br>
                <p style="color:#cccccc;font-size:16px;line-height:30px;">&nbsp;&nbsp;&nbsp;&nbsp; 04
                    从众多街拍中挑选出心宜的几款，浅浅的马卡龙色大衣定是最受欢迎的款式之一。泛着香甜味儿，不浓不淡刚刚好的小香风外套，哪怕有了西装领，雕花一粒扣依旧将少女粉嫩的时光收藏。</p>
            </h>
        </div>
    </div>
    <!--底部-->
    <div class="bottom">
        <div class="bottom-top">
            <div class="linker">
                <div class="liuy">
                    <a href="">
                        <div class="tubiao"><img src="../image/liuy.gif"/></div>
                        <div class="wenzi">在线留言</div>
                        <div class="clearBoth"></div>
                    </a>
                </div>
                <div class="clearBoth"></div>
            </div>
        </div>
        <div class="bottom-bot">Copyright &copy; 2016 - 2017 Tencent. All Rights Reserved 蘑菇网</div>
    </div>
</div>
</body>
<script type="text/javascript">
    apiready = function () {
        vm = new Vue({
            el: "#app",
            data: {
                siteconfig: {},     // 站点配置
                nav_list: [      // 导航菜单
                    {children_list: []},
                    {children_list: []},
                    {children_list: []},
                ],
                news: {}
            },
            created() {
                this.get_site_config();
                this.get_nav_list();
                this.get_detail_news();
            },
            methods: {
                // 站点配置
                get_site_config() {
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "id": 188,
                        "method": "common.siteconfig",
                        "params": {}
                    }).then(response => {
                        this.siteconfig = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
                // 获取导航菜单
                get_nav_list() {
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "method": "common.nav",
                        "params": {},
                        "id": 1
                    }).then(response => {
                        this.nav_list = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
                // 根据ID获取文章信息
                get_detail_news() {
                    let id = 6;
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "id": 188,
                        "method": "news.detail_news",
                        "params": {id: id},
                    }).then(response => {
                        this.news = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
            },
            filters: {
                dateFormat(time) {
                    return new Date(time).toLocaleDateString().replace("/", "-").replace("/", "-")
                }
            }
        })
    }
</script>
</html>